<template>
  <div class="char1">
    <!-- 自定义一个div来装我们的图 -->
    <calendar :show="show" :dayClick="onChange" />
    <!-- <div class="top">
      <el-input
        placeholder="请选择日期"
        suffix-icon="el-icon-date"
        v-model="fromtime"
        @focus="show=true;seltime=true"
      ></el-input>
      <el-input
        placeholder="请选择日期"
        suffix-icon="el-icon-date"
        v-model="totime"
        @focus="show=true;seltime=false"
      ></el-input>
    </div> -->
    <div id="eschar" style="height:200px; margin:auto"></div>
    <!-- <scEcharts ref="c1" height="300px" :option="option"></scEcharts> -->
  </div>
</template>
<script>
import dayjs from "dayjs";
import { sale } from "@/api/echarts";
let echarts = require("echarts");
// import scEcharts from '@/components/scEcharts';
export default {
  name: "eschar",
//   components:{
//       scEcharts
//   },
  data() {
    return {
      fromtime: dayjs().format("YYYYMMDD"),
      totime: dayjs().format("YYYYMMDD"),
      seltime: true,
      show: false,
      sale: {},
      num: {},
      datanum:0,
      option: {
        //标题
        title: { text: "当日销售情况" },
        
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(255,255,255,0.8)",
          extraCssText: "box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);",
          textStyle: {
            color: "#6a717b"
          }
        },
        //工具
        toolbox: {
          //是否显示
          show: true,
          feature: {
            //折线图 与 柱状图 切换
            // magicType: {
            //   type: ["line", "bar","pie"]
            // },
            //下载
            saveAsImage: {}
          }
        },
        //节点显示
        // legend: {
        //   data: ["数量"]
        // },
        //x轴数据
        // xAxis: {
        //   data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        // },
        // //y轴
        // yAxis: {
        // },
        //数据
        series: [
          {
            //初始类型
            name:'数量',
            type: "pie",
            data: []
          }
        ]
      }
    }
  },
  methods: {
    async draw() {
      //通过echarts初始化我们的div
      let myChart = echarts.init(document.getElementById("eschar"));
      //为这个echarts的图添加属性
      this.option.series[0].data=[];
      this.datanum=0;
      const result = await sale.post({ todayfrom: this.fromtime, todayto: this.totime});
      result.data = JSON.parse(result.data);
        // .post("echars/sale", { todayfrom: this.fromtime, todayto: this.totime})
          this.ds_order = result.data;
          console.log(result.data);
          this.sale.pn = [];
          this.sale.num = [];
          this.num.num1 = 0;
          this.num.num2 = 0;
          // result.data.forEach(ele => {
          //   if (ele.memo == "复销") {
          //     this.num.num1+=1
          //   }
          //   if(ele.memo=="特卖"){
          //     this.num.num2+=1
          //   }
          // });
          //this.option.series[0].data=[this.num.num1,this.num.num2];
          // this.option.xAxis.data = ["复消","特卖"];
           result.data.forEach((ele,key) => {
             console.log(key);
             result.data.forEach((ele_l,key_l) => {
               if(ele_l.pc==ele.pc&&key!=key_l){
                 ele.num=ele.num+ele_l.num;
                 result.data.splice(key_l,1);
               }
             });
            this.option.series[0].data.push({value:ele.num,name:ele.pn +"("+ele.num+")"});
            this.datanum+=ele.num;
          });
          //this.option.yAxis.data = this.sale.num;
          console.log(this.option.series[0].data);
          //console.log(this.option.xAxis.data);
          myChart.setOption(this.option, true);
          window.onresize = function(){ myChart.resize() };
    },
    onChange(date) {
      if (this.seltime) {
        console.log(this.option.series[0].data);
        this.fromtime = date.format("YYYYMMDD");
      } else {
        this.totime = date.format("YYYYMMDD");
      }
      return true;
    }
  },
  watch: {
    //数据变化时自动重画，在控制台修改message,会自动重画
    fromtime: function() {
      console.log("1");
      this.draw();
    },
    totime: function() {
      console.log("1");
      this.draw();
    }
  },
  mounted() {
    //页面加载的时候，调用画图方法，画图
    this.draw();
  }
};
</script>
<style scoped>
.char1 {
  text-align: center;
}
.top {
  margin: 20px;
}
.el-button {
  margin-top: 20px;
}
.top .el-input {
  max-width: 200px;
  width: 40%;
  margin-right: 10px;
}
</style>